.devdocs,
.design {
	font-size: 18px;
	line-height: 1.618;
	color: $gray-dark;
	margin: 0 auto;
	max-width: 960px;
	padding: 1.777em 8.184em;

	@include breakpoint( "<960px" ) {
		padding: 24px;
		max-width: 100%;
	}
}

.is-section-devdocs-start .layout__primary {
	margin-left: 0;
}

.devdocs__title {
	color: darken( $gray, 20% );
	font-weight: 300;
	font-size: 24px;
	padding: 24px;
}

.devdocs__result.card {
	padding: 16px 0;
}

.devdocs__result-header {
	overflow: hidden;
	padding: 0 18px;
}

.devdocs__result-title {
	clear: none;
	float: left;
}

.devdocs__result-link {
	font-size: 18px;
}

.devdocs__result-path {
	font-size: ( 12 / 15 ) * 1em;
	clear: none;
	color: $gray;
	float: right;
	margin: 8px 0 0;
}

.devdocs__result-snippet {
	p {
		margin-bottom: 0;
	}
	margin: 0;
	margin-top: 10px;
	border-top: 1px solid lighten( $gray, 20% );
	padding: 9px 18px;
	font-size: ( 13 / 15 ) * 0.8em;
	background-color: $white;
}

.devdocs__doc {
	h1, h2, h3, h4, h5, h6 {
		font-family: Merriweather, Georgia, "Times New Roman", Times, serif;
		font-weight: 700;
		line-height: 1.5em;
		margin-bottom: 0.6em;
	}

	h1 {
		color: $blue-wordpress;
		font-size: 47px;
		line-height: 1.333;
	}

	h2 {
		font-size: 1.777em;
	}

	pre {
		padding: (12 / 15) * 1em;
		background: $white;
		background-color: $white;
	}

	code {
		font-size: (13 / 15) * 1em;
		background-color: $white;
		padding: 0.2em;
		border-radius: 3px;
	}

	pre > code {
		background-color: $transparent;
	}

	.emoji {
		height: 18px;
	}

	.label {
		$invert: $white;
		font-weight: bold;
		font-size: 12px;
		padding: 1px 5px 2px 5px;
		border-radius: 2px;

		&.status-awaiting-fixes {
			background: #ea652d;
			color: $invert;
		}

		&.status-needs-review {
			background: #fbc92f;
		}

		&.status-ready-to-merge {
			background: #d6fa82;
		}

		&.status-in-progress {
			background: #2880e2;
			color: $invert;
		}
	}

	video {
		max-width: 100%;
		margin-bottom: 1em;
	}
}

.devdocs__doc-header {
	font-size: 13px;

	a {
		float: right;
	}
}

.devdocs__doc-content {
	margin-top: 48px;
}

.devdocs__welcome {
	color: $gray-dark;
}

.devdocs__welcome-title {
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 24px;
}

.devdocs__welcome-illustration {
	float: right;
	margin-top: -120px;
}


.docs__popover-hover-example__bullet {
	list-style: none;
	float: left;
	cursor: pointer;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	font-size: 10px;
	background-color: #e0ffe0;

	&:hover {
		background-color: $gray;
		color: $white;
	}

	&:nth-child(4n) {
		background-color: #e0ffff;

		&:hover {
			background-color: $gray;
			color: $white;
		}
	}

	&:nth-child(4n + 1) {
		background-color: #e0e0ff;

		&:hover {
			background-color: $gray;
			color: $white;
		}
	}

	&:nth-child(4n + 2) {
		background-color: #ffffe0;

		&:hover {
			background-color: $gray;
			color: $white;
		}
	}
}
